<script setup lang="ts">
  import { ref,inject } from 'vue'
  import { onLoad,onShow } from '@dcloudio/uni-app'
  import {
    advancePayment,
    cancelSignUp, isPlayProducts,
    personOrderShow,
    playCheck
  } from '@/api/training'
  import { REFUNDS_ENUM, SIGN_ENUM, SIGN_ENUM_TEXT } from '@/utils/basicData'
  import uploadImage from '@/components/uploadImage/index.vue'
  import { msg, showModal, wechatPayment } from '@/utils/tools'
  import { orderInfoType } from '@/utils/types'
  const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
  let orderId = 0
  const totalPrice = ref(0)
  const productShow = ref(false)
  const orderInfo = ref<orderInfoType>({
    id:0,
    insuranceAmount:0,
    provinceId:0
  })
  const $Prefix = inject('$Prefix')
  const markersAddress = ref<any[]>([])
  const insuranceFile = ref([])
  const insurancePayEnum = ref(true)
  const indisabledEnum = ref(true)
  const infoShow = ref(false)
  onLoad((options:any) => {
    orderId = options.id

  })
  onShow(() => {
    getOrderInfo()
  })
  const getOrderInfo = () => {
    personOrderShow({id:orderId}).then(res => {
      if(res.code == 200){
        orderInfo.value = JSON.parse(JSON.stringify(res.data))
        orderInfo.value.insurancePayFile = orderInfo.value.insurancePayFile ? JSON.parse(orderInfo.value.insurancePayFile) : []
        orderInfo.value.enterGroupQrCode = orderInfo.value.enterGroupQrCode ? JSON.parse(orderInfo.value.enterGroupQrCode) : []
        orderInfo.value.eventsItemNames = orderInfo.value.eventsItemNames.join('；')
        if(orderInfo.value.insurancePayEnum == 1){
          insurancePayEnum.value = true
        }
        if (orderInfo.value.canPayInsurance){
          indisabledEnum.value = true
        } else {
          insurancePayEnum.value = false
          indisabledEnum.value = false
        }
        if(orderInfo.value.latitude && orderInfo.value.longitude){
          markersAddress.value = [
            {
              id:0,
              iconPath:`${$Prefix}/public/images/smallImage/marker.png`,
              width:20,
              height:20,
              longitude:parseFloat(orderInfo.value.longitude),
              latitude:parseFloat(orderInfo.value.latitude),
              callout:{
                padding:'5px 15px',
                borderRadius:6,
                anchorY: 0,
                anchorX: 0,
                fontSize:14,
                display: 'ALWAYS',
                content:orderInfo.value.activityAddress
              }
            }
          ]
        }else{
          markersAddress.value = []
        }
        calculateAmount()
      }
    })
  }
  const serviceClick = () => {
    if (!indisabledEnum.value){
      return false
    }
    insurancePayEnum.value = !insurancePayEnum.value
    insuranceFile.value = []
    if(!insurancePayEnum.value){
      uni.showModal({
        title: '温馨提示',
        content: '参加训练营需要保险,若不再本平台购买保险,请上传其他保险证明才可缴费',
        confirmText: "我已知晓",
        showCancel: false,
        confirmColor: '#92C75B'
      })
    }
    calculateAmount()
  }
  const calculateAmount = () => {
    totalPrice.value = 0
    if(insurancePayEnum.value && orderInfo.value.registrationOrderStatusEnum == 3){
      totalPrice.value += +orderInfo.value.insuranceAmount
    }

    orderInfo.value.products.map((item:any) => {
      totalPrice.value += +item.registrationAmount
    })
    if(orderInfo.value.buyAdditionalProducts.length > 0){
      orderInfo.value.buyAdditionalProducts.map((item:any) => {
        totalPrice.value += +item.registrationAmount
      })
    }
  }
  // 取消报名筛选
  const cancelEnum = (data:number) => {
    return [0,2,3,8].indexOf(data) > -1
  }
  // 支付按钮筛选
  const playEnum = (data:number) => {
    return [3,8].indexOf(data) > -1
  }

  // 微信导航
  const navigationClick = (data:any) => {
    uni.openLocation({
      latitude: parseFloat(data.latitude),
      longitude: parseFloat(data.longitude),
      name:data.address,
      address:data.activityAddress
    });
  }

  // 支付生成预订单
  const preOrder = () => {
    if(orderInfo.value.registrationOrderStatusEnum == 3 && !insurancePayEnum.value && insuranceFile.value.length == 0){
      msg('请上传保险附件证明材料',false)
      return false
    }
    const insuranceFileString = insuranceFile.value.map(item => {
      return {
          fullUrl:item.fullUrl,
          id:item.id,
          name:item.name,
          thumb_url:item.thumb_url,
          url:item.originalUrl
      }
    })
    const params = {
      id:orderInfo.value.id,
      insurancePayEnum:insurancePayEnum.value? 1: 0,
      insuranceFile:JSON.stringify(insuranceFileString)
    }
    advancePayment(params).then(res => {
      if(!res.data.payInfo){
        // productShow.value = true
        productShow.value = false
        getOrderInfo()
      }else{
        // 起调支付
        wechatPayment(res.data.payInfo).then((_res:any) =>{
          // 支付后检查是否支付
          playCheck({orderId:res.data.orderId}).then(resData => {
            msg('支付成功',false)
            getOrderInfo()
            // productShow.value = true
            productShow.value = false
          }).catch((err:any) => {
            msg('检查失败，请从新进行页面',false)
          })
        }).catch((err:any) => {
          getOrderInfo()
          msg('支付失败，请重试',false)
        })
      }
    })
  }
  const cancelRegistration = (data:any) => {
    showModal({
      content:'您确定要取消报名吗？',
      confirmText:'确定',
      success:(res) => {
        if(res.confirm){
          cancelSignUp({id:orderInfo.value.id}).then(res => {
            msg('取消成功')
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];
            uni.navigateBack({
              delta:1,
              success:() => {
                // #ifndef H5
                prevPage?.$vm?.reload()
                // #endif
                // #ifdef H5
                prevPage.$.setupState.reload()
                // #endif
              }
            })
          })
        }
      }
    })
  }
  const previewImage = (url:string) => {
    uni.previewImage({
      current:url,
      urls:[url]
    })
  }
  const addProducts = () => {
    isPlayProducts({registrationId:orderInfo.value.id}).then(res => {
      if(res.data){
        uni.navigateTo({url:`/pageSignUp/productsOrder/productsOrder?id=${orderInfo.value.id}`})
      }else{
        uni.navigateTo({url:`/pageSignUp/additionalProducts/additionalProducts?id=${orderInfo.value.id}`})
      }
    })
  }

  const skipInsurance = () => {
    const url = 'https://dwx-sit.cpic.com.cn/cxNew/dwx/mobilemsbv2/?channelCode=14&hdlrCode=999&sourceType=A2&plcPlanCode=PDL20240524A00008469&version=V001&branchCode=6010100#/'
    uni.navigateTo({url:`/pages/webView/webView?url=${encodeURIComponent(url)}`})
  }

  const insuranceEdit = () => {
    uni.navigateTo({url:`/pageSignUp/insuranceEdit/insuranceEdit?id=${orderInfo.value.id}`})
  }

  const refundClick = (type:any,data:any) => {
    const params = {
      id:0,
      name:orderInfo.value.products[0].name,
      regId:orderInfo.value.id,
      sourceId:0,
      orderTypeEnum:type,
      payTime:orderInfo.value.products[0].payTime,
      createdTime:orderInfo.value.products[0].createdTime
    }
    if(type == 0){ // 项目
      params.sourceId = orderInfo.value.id
    }else if(type == 1){ // 附加产品
      params.name = data.name
      params.sourceId = data.id
      params.payTime = data.payTime
      params.createdTime = data.createdTime
    }
    uni.navigateTo({url:`/pageSignUp/refundsForm/refundsForm?params=${JSON.stringify(params)}`})
  }

  const reload = () => {
    getOrderInfo()
  }

  const refundInfo = (data:any,type:number) => {
    const params = {
      id:0,
      name:orderInfo.value.products[0].name,
      regId:orderInfo.value.id,
      sourceId:0,
      orderTypeEnum:type,
      payTime:orderInfo.value.products[0].payTime,
      createdTime:orderInfo.value.products[0].createdTime
    }
    if(type == 0){ // 项目
      params.sourceId = orderInfo.value.id
    }else if(type == 1){ // 附加产品
      params.name = data.name
      params.sourceId = data.id
      params.payTime = data.payTime
      params.createdTime = data.createdTime
    }

    uni.navigateTo({url:`/pageSignUp/refundList/refundList?id=${orderInfo.value.id}&param=${JSON.stringify(params)}&type=${type}`})
    // else{
    //   uni.navigateTo({url:`/pageSignUp/refundsDetails/refundsDetails?id=${data.refundId}`})
    // }

  }

  const mobileClick = (tel:string) => {
    uni.makePhoneCall({
      phoneNumber:tel
    })
  }

  defineExpose({reload})
</script>

<template>
  <view class="order-body">
    <xx-title title="订单详情"/>
    <view class="order-item">
      <view class="order-title">订单状态</view>
      <view class="order-status" v-if="orderInfo.registrationOrderStatusEnum" :class="SIGN_ENUM_TEXT[orderInfo.registrationOrderStatusEnum]">{{ SIGN_ENUM[orderInfo?.registrationOrderStatusEnum] }}</view>
    </view>
    <block v-if="orderInfo.registrationOrderStatusEnum == 3">
      <view class="service-list" v-if="orderInfo.canPayInsurance">
        <view class="service-item" @click="serviceClick">
          <view class="service-body">
            <view class="service-title">{{ orderInfo.insuranceName }}</view>
            <view class="service-content">{{ orderInfo.remark }}</view>
          </view>
          <view class="service-money">
            ￥{{orderInfo.insuranceAmount * 0.01 }}
          </view>
          <view class="service-btn" :class="{disable: !indisabledEnum}">
            <view class="btn" :class="{check:insurancePayEnum}">
              <up-icon v-if="insurancePayEnum" name="checkmark-circle-fill" color="#F36E13" size="20"></up-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="service-list" v-else>
        <view class="service-item">
          <view class="service-body special">
            <view class="service-title">
              学员年龄在8岁及以下，若需要购买保险，请自行联系保险公司谭经理，电话:<text style="color: #F36E13" selectable="true" user-select="true" @click="mobileClick('13551093179')">13551093179</text>(微信同号)
            </view>
<!--            <view class="service-href" @click="skipInsurance">保险平台入口</view>-->
          </view>
        </view>

      </view>
      <view class="insurance" v-if="!insurancePayEnum">
        <view class="title">保险附件证明</view>
        <view class="insurance-file">
          <upload-image :maxCount="1" v-model="insuranceFile"/>
        </view>
      </view>
    </block>

    <view class="order-item">
      <view class="order-header">
        <view class="order-name">订单详情</view>
        <view class="order-num">共计{{ orderInfo.products?.length + orderInfo.buyAdditionalProducts?.length }}个服务</view>
      </view>
      <view class='order-product' v-if="orderInfo?.products?.length > 0">
<!--        <view class="btn-status" :class="`btn-status-${orderInfo.products[0].refundApplicationStatusEnum}`" v-if="orderInfo.products[0].paymentStatusEnum == 2">{{REFUNDS_ENUM[orderInfo.products[0].refundApplicationStatusEnum]}}</view>-->
<!--        <view class="btn-status" :class="`btn-status-${orderInfo.products[0].paymentStatusEnum}`" v-if="orderInfo.products[0].paymentStatusEnum == 5">{{orderInfo.products[0].paymentStatusEnumDesc}}</view>-->
        <view class='order-product-left'>
          <view class="order-body-item" v-for="item in orderInfo.products" :key="item.id">
            <view class="body-list-name">{{ item.name }}</view>
            <view class="body-item-bottom">
              <view class="body-item-left">
                <view class="left-info">价格：￥{{item.registrationAmount * 0.01}}</view>
                <view class="left-num">数量：1</view>
              </view>
            </view>
          </view>
        </view>
        <view class='order-product-right' v-if="orderInfo?.products[0].paymentStatusEnum == 2 || orderInfo.products[0].paymentStatusEnum == 5">
          <view class="btn" style="margin-bottom: 20rpx;border-color: #92C75B" v-if="!(orderInfo?.products[0]?.hasRefundStatus)" @click="refundClick(0)">申请退款</view>
          <view class="btn" v-else-if="orderInfo?.products[0]?.hasRefundStatus" @click="refundInfo(orderInfo.products[0],0)">退费详情</view>
        </view>
      </view>
      <template v-if='orderInfo.buyAdditionalProducts?.length > 0'>
        <view class="order-body-item" v-for="item in orderInfo.buyAdditionalProducts" :key="item.id">
<!--          <view class="btn-status" :class="`btn-status-${item.refundApplicationStatusEnum}`"  v-if="item.paymentStatusEnum == 2">{{REFUNDS_ENUM[item.refundApplicationStatusEnum]}}</view>-->
<!--          <view class="btn-status" :class="`btn-status-${item.paymentStatusEnum}`"  v-if="item.paymentStatusEnum == 5">{{item.paymentStatusEnumDesc}}</view>-->
          <view class="body-list-name">{{ item.name }}</view>
          <view class="body-item-bottom">
            <view class="body-item-left">
              <view class="left-info">价格：￥{{item.registrationAmount * 0.01}}</view>
              <view class="left-num">数量：1</view>
            </view>
            <view class="body-item-right" v-if="item.paymentStatusEnum == 2 || item.paymentStatusEnum == 5">
              <view class="btn" style="border-color: #92C75B" v-if="(!item.hasRefundStatus)" @click="refundClick(1,item)">申请退款</view>
              <view class="btn" v-else-if="item.hasRefundStatus" @click="refundInfo(item,1)">退费详情</view>
            </view>
          </view>
        </view>
      </template>
      <view class="order-body-btn">
          <text>合计：</text>
          <view class="money">￥{{totalPrice * 0.01}}</view>
      </view>
    </view>
<!-- orderInfo.registrationOrderStatusEnum == 5   -->
    <view class="order-products" v-if="false">
      <image @click="addProducts" :src="`${$Prefix}/public/images/smallImage/product-btn-img.png`" mode="widthFix"/>
    </view>


    <view class="train-address" v-if="orderInfo.latitude && orderInfo.longitude">
      <view class="info-title" @click="navigationClick(orderInfo)">
        <view class="address-left">
          <up-icon name="map" color="#505363" size="14"></up-icon>
          <view class="address">{{orderInfo.activityAddress}}</view>
        </view>
        <up-icon name="arrow-right" color="#505363" size="14"></up-icon>
      </view>
      <view class="map-box">
        <map
          class="map-continer"
          :latitude="parseFloat(orderInfo.latitude)"
          :longitude="parseFloat(orderInfo.longitude)"
          :markers="markersAddress"
          :enable-zoom="false"
          :enable-scroll="false"
          @tap="navigationClick(orderInfo)"
          :show-location="true"
        ></map>

      </view>
    </view>

    <view class="order-item">
      <view class="order-header">
        <view class="order-name">学员信息</view>
      </view>
      <view class="order-info">
        <view class="order-info-item">
          <view class="label">训练营名称</view>
          <view class="value">{{orderInfo.eventsName}}</view>
        </view>
        <view class="order-info-item">
          <view class="label">参加项目</view>
          <view class="value">{{orderInfo.itemName}}</view>
        </view>
        <view class="order-info-item" v-if="orderInfo.eventsItemNames">
          <view class="label">子项目</view>
          <view class="value">{{orderInfo.eventsItemNames}}</view>
        </view>
        <view class="order-info-item">
          <view class="label">训练时间</view>
          <view class="value">{{orderInfo.eventsNumberName}}({{orderInfo.plannedStartTime}}~{{orderInfo.plannedCompletionTime}})</view>
        </view>
        <view class="order-info-item">
          <view class="label">身份证</view>
          <view class="value">{{orderInfo.idCardMask}}</view>
        </view>
        <view class="order-info-item">
          <view class="label">联系人</view>
          <view class="value">{{ orderInfo.name }}</view>
        </view>
        <view class="order-info-item" v-if="orderInfo.mobile">
          <view class="label">联系电话</view>
          <view class="value">{{orderInfo.mobile}}</view>
        </view>
        <block v-if="infoShow">
          <view class="order-info-item">
            <view class="label">身高</view>
            <view class="value">{{orderInfo.height}}cm</view>
          </view>
          <view class="order-info-item">
            <view class="label">体重</view>
            <view class="value">{{orderInfo.weight}}kg</view>
          </view>
          <view class="order-info-item">
            <view class="label">衣服尺码</view>
            <view class="value">{{orderInfo.clothingSize}}</view>
          </view>
          <view class="order-info-item">
            <view class="label">鞋子尺码</view>
            <view class="value">{{orderInfo.shoeSize}}</view>
          </view>
          <view class="order-info-item">
            <view class="label">所在城市</view>
            <view class="value">{{orderInfo.provinceName}}/{{orderInfo.cityName}}/{{orderInfo.countyName}}</view>
          </view>
          <view class="order-info-item">
            <view class="label">详细地址</view>
            <view class="value">{{orderInfo.address}}</view>
          </view>
          <view class="order-info-item flex-start" v-if="orderInfo.registrationOrderStatusEnum != 3 && orderInfo?.insurancePayFile.length > 0">
            <view class="label">保险证明材料</view>
            <view class="value">
              <image @click="previewImage(orderInfo?.insurancePayFile[0].fullUrl)" style="width: 150rpx;height: 150rpx"  :src="orderInfo?.insurancePayFile[0].fullUrl"/>
            </view>
          </view>
        </block>
      </view>
      <view class="order-info-item-center" @click="infoShow = !infoShow">
        {{!infoShow?'所有信息':'收起信息'}}
        <up-icon :name="infoShow?'arrow-up':'arrow-down'" size="14" style="margin-left: 40rpx"></up-icon>
      </view>
    </view>

    <view class="order-item" v-if="orderInfo.registrationOrderStatusEnum == 5 && orderInfo.enterGroupQrCode.length > 0">
      <view class="eq-code-title">长按保存/截图保存 加入群聊</view>
      <view class="eq-code-image">
        <image mode="widthFix" :show-menu-by-longpress="true" :src="orderInfo.enterGroupQrCode[0].fullUrl"/>
      </view>
    </view>

      <view class="bottom-fixed" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
        <view class="seizeASeat"></view>
      </view>
      <view class="bottom-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
        <view class="btn"
                v-if="cancelEnum(orderInfo.registrationOrderStatusEnum)"
                @click="cancelRegistration">取消报名</view>
<!--        @click="preOrder"-->
        <view class="btn danger" v-if="orderInfo.registrationOrderStatusEnum == -4" @click="insuranceEdit">修改保险</view>
        <view class="btn group-registration" v-if="playEnum(orderInfo.registrationOrderStatusEnum)" @click="preOrder">立即支付</view>
        </view>
  </view>
  <up-popup :show="productShow" mode="center" :customStyle="{width:'600rpx'}" bgColor="transparent">
    <view class="product-body">
      <view class="product-close">
        <up-icon name="close-circle-fill" color="#ffffff" size="20" @click="productShow = !productShow"></up-icon>
      </view>
      <image :src="`${$Prefix}/public/images/smallImage/product-img.png`" mode="widthFix"/>
      <view class="product-btn" @click="addProducts">
        立即购买
      </view>
    </view>
  </up-popup>
</template>

<style scoped lang="scss">
.order-body{
  width: 100%;
  box-sizing: border-box;
  padding: 1rpx;
  background-color: #F5F5F5;
  min-height: 100vh;
  .order-item{
    margin: 28rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 32rpx;
    .order-title{
      font-size: 24rpx;
      color: #818496;
    }
    .order-status{
      margin-top: 5rpx;
      font-size: 36rpx;
      font-weight: 500;
    }
    .order-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 14rpx;
      border-bottom: 1rpx solid #EBEBEB;
      .order-name{
        font-size: 32rpx;
        color: #21252E;
      }
      .order-num{
        font-size: 24rpx;
        color: #818496;
      }
    }
    .order-product{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      border-bottom: 1rpx solid #F5F5F5;
      position: relative;
      .order-product-left{
        width: calc(100% - 150rpx);
        .order-body-item{
          position: relative;
          border-bottom: 0;
        }
        .body-item-left{
          width: 100%;
        }
      }
      .order-product-right{
        width: 150rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: 20rpx;
        .btn{
          font-size: 24rpx;
          padding: 8rpx 24rpx;
          border-radius: 24rpx;
          border: 1rpx solid #ECEEF1;
        }
      }
    }
    .order-body-item{
      padding: 14rpx 0;
      border-bottom: 1rpx solid #F5F5F5;
      position: relative;
      .body-list-name{
        font-size: 28rpx;
        color: #21252E;
        margin-bottom: 4rpx;
      }
      .body-item-bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .body-item-left{
          width: calc(100% - 150rpx);
          .left-info{
            font-size:24rpx;
            color: #505363;
          }
          .left-num{
            margin-top: 5rpx;
            font-size: 24rpx;
            color: #505363;
          }
        }
        .body-item-right{
          width: 150rpx;
          .btn{
            font-size: 24rpx;
            padding: 8rpx 24rpx;
            border-radius: 24rpx;
            border: 1rpx solid #ECEEF1;
          }
        }
      }
    }
    .order-body-btn{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 24rpx;
      text{
        font-size: 24rpx;
        color: #818496;
      }
      .money{
        color: #F37C2B;
        font-size: 32rpx;
        font-weight: 500;
      }
      .order-total-text{
        display: flex;
        align-items: baseline;
      }
      .order-total-btn{
        font-size: 24rpx;
        padding: 8rpx 24rpx;
        border-radius: 24rpx;
        border: 1rpx solid #ECEEF1;
      }
    }
    .order-info{
      padding: 10rpx 0;
      .order-info-item{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8rpx 0;
        font-size: 28rpx;
        &.flex-start{
          align-items: flex-start;
        }
        .label{
          color: #27292c;
          width: 170rpx;
        }
        .value{
          width: calc(100% - 170rpx);
          color: #505363;
          text-align: right;
        }
      }
    }
    .order-info-item-center{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #999999;
      margin-top:10rpx;
    }
  }
  .order-products{
    margin: 0 28rpx;
    image{
      width: 100%;
    }
  }
}
.eq-code-title{
  text-align: center;
  margin-bottom: 10rpx;
  color: #505363;
}
.eq-code-image{
  width:500rpx;
  margin: 0 auto;
  image{
    width: 100%;
  }
}
.bottom-fixed{
  padding-top: 14px;
  background-color: #F5F5F5;
  .seizeASeat{
    height: 60rpx;
  }
}
.bottom-btn{
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 28rpx;
  padding-right: 28rpx;
  box-sizing: border-box;
  padding-top: 14rpx;
  background-color: #FFFFFF;
  .btn{
    padding: 16rpx 32rpx;
    margin-right:10rpx;
    text-align: center;
    border-radius: 100rpx;
    box-sizing: border-box;
    border:1rpx solid #92C75B;
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 2rpx;
    &:last-child{
      margin-right: 0;
    }
  }
  .danger{
    background: #f54747;
    color: #FFFFFF;
  }

}
.insurance{
  margin:28rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  .title{
    font-size: 32rpx;
    color: #21252E;
    display: flex;
    align-items: center;
    padding-bottom: 14rpx;
    border-bottom: 1rpx solid #EBEBEB;
    &:before{
      content: '*';
      color: #f34848;
    }
  }
  .insurance-file{
    padding-top: 14rpx;
  }
}

.train-address{
  margin: 16rpx 28rpx 18rpx;
  background-color: #FFFFFF;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  .info-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .address-left{
      width: calc(100% - 28rpx);
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .address{
        color: #505363;
        margin-left: 5rpx;
        font-size: 28rpx;
      }
    }
  }
  .map-box{
    width: 100%;
    height: 200rpx;
    background-color: #f5f5f5;
    margin-top: 16rpx;
    border-radius: 16rpx;
    overflow: hidden;
    .map-continer{
      width: 100%;
      height: 100%;
    }
  }
}
.service-list{
  margin:28rpx;
  .service-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-radius: 20rpx;
    background-color: rgba(243, 124, 43, 0.06);
    margin-bottom: 20rpx;
    &:last-child{
      margin-bottom: 0;
    }
    .service-body{
      width: calc(100% - 100px);
      .service-title{
        font-size: 28rpx;
        color: #505363;
        word-break: break-all;
      }
      .service-content{
        margin-top: 5rpx;
        font-size: 24rpx;
        color: #818496;
      }
      &.special{
        width: 100%;
        .service-href{
          color: #0c82ea;
          font-size: 28rpx;
          margin-top: 10rpx;
        }
      }
    }
    .service-money{
      width: 80px;
      color: #F36E13;
    }
    .service-btn{
      width:20px;
      text-align: right;
      .btn{
        width: 20px;
        height: 20px;
        border-radius: 100rpx;
        background-color: #F5F5F5;
        border: 1rpx solid #999999;
        display: flex;
        justify-content: center;
        align-items: center;
        &.check{
          background-color: transparent;
          border: none;
        }
      }
      &.disable .btn{
        border: 1rpx solid #999999;
        background-color: #e6e6e6;
      }
    }
  }
}
.product-body{
  width: 100%;
  text-align: center;
  .product-close{
    width: 90%;
    text-align: right;
    margin-bottom: 20rpx;
    ::v-deep .u-icon {
      display: inline-block;
    }
  }
  image{
    width: 100%;
    margin: 20rpx 0;
  }
  .product-btn{
    margin: 0 auto;
    padding: 16rpx 32px;
    display: inline-block;
    border-radius: 100rpx;
    color: #FFFFFF;
    letter-spacing: 4rpx;
    font-weight: bold;
    background: linear-gradient(180deg, #92C75B 0%, #5E9426 100%);
    box-shadow: inset 0 4rpx 0 0 rgba(255, 255, 255, 0.5);
  }
}
.btn-status{
  position: absolute;
  right: -10rpx;
  top: 10rpx;
  font-size: 12px;
  border-radius: 20rpx 0 0 20rpx;
  color: #FFFFFF;
  padding:5rpx 10rpx;
  &--3{
    background-color: #999999;
  }
  &--1,&--2{
    background-color: #f33636;
  }
  &-0,&-1,&-10,&-5 {
    background-color: #92C75B;
  }
}
.group-registration{
  background: #92C75B;
  color: #FFFFFF;
}
</style>
